;(function(){
	//鼠标向上拖拽事件

	var main = document.querySelector('#main');

	var start, end, time;
	"mousedown mousemove mouseup".split(' ').forEach(function(etype) {
		document.addEventListener(etype, function(e) {
			e.preventDefault()
			switch(e.type) {
				case 'mousedown':
					time = Date.now();
					start = {
						X: e.clientX,
						Y: e.clientY
					}
					break;

				case 'mousemove':
					end = {
						X: e.clientX,
						Y: e.clientY
					}
					break;

				case 'mouseup':
					direction();
					break;

			}
		})
	});

	function direction() {
		var Y = end.Y - start.Y;
		var X = end.X - start.X;
		var angle = Math.atan2(-Y, X) * 180 / Math.PI;
		var dir = Math.sqrt(X * X + Y * Y);
		var del = Date.now() - time;
		if(dir > 20 && del < 300) {
			if(angle > -45 && angle < 45) {

			} else if(angle >= 45 && angle < 135) {
				$('.shade').animate({
					"top": 0
				});

			} else if(angle > 135 || angle < -135) {

			} else if(angle > -135 && angle < -45) {

			}

		}
	}

	$('.shade').click(function() {
		$(".shade").animate({
			'top': '100%'
		})
	})
	
	$(".manBar").click(function(e){
		e.stopPropagation();
	})
	$(".womanBar").click(function(e){
		e.stopPropagation();
	})
	
	
	
	
	
	var cityData = '全选';
    var sexData = 2;
    var ageData = 100;
    var moveData= "周一"
    var day="MonData"
    //筛选条件事件
    $("div[role=sex]").click(function(){
        sexData = getOperName.call(this);

    });
    $("div[role=city]").click(function() {
        var store = $(this);
        $(this).parent().parent().parent().find("div").each(function(index, element) {
            $(element).find("div").attr("style", "COLOR: rgb(255,255,255);");
        });
        $(this).find('div').attr("style", "COLOR: rgb(255,232,0);");
        cityData = $(this).find('div').attr('geoid');
    });
   
    $("div[role=age]").click(function() {
        ageData = getOperName.call(this);
    });
    $("div[role=move]").click(function() {
        moveData = getOperName.call(this);
        day=$(this).find("span").attr("soperid")
        
        weekData(day)
       startData(day)
        
    });
    $('#showSearch').click(function() {
	
        console.log(cityData + "  " +" "+ sexData + " " + ageData+" "+moveData);
         
    });

    function getOperName() {
        var store = $(this);
        $(this).parent().parent().parent().find("div").each(function(index, element) {
            $(element).find("span").attr("style", "COLOR: rgb(255,255,255);");
        });
        $(this).find('span').attr("style", "COLOR: rgb(255,232,0);");
        var oper = $(this).find('span');
        var operid = oper.attr('doperid') || oper.attr('soperid');
        return operid;
    }
	
	
	
	
	
	
	
	
	
	
	
	manChart()
	
	function manChart(){
		var bar=echarts.init($(".manBar")[0]);
		var option = {
			backgroundColor: '../images/S8-bg.png',
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    yAxis:  {
		        type: 'value',
		        axisLabel:{
		        	formatter:'{value}%',
		        	textStyle:{
		        		color:"#fff"
		        	}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        axisLabel:{
		        	textStyle:{
		        		color:"#fff" 
		        	}
		        },
		        data: ['0-20','20-40','40-60','60-80','80-100']
		    },
		    series: [
		        {
		            name: 'ios',
		            type: 'bar',
		            stack: 'ios',
                    itemStyle:{
                        normal:{
                            color:'#C23531'
                        }
                    },
		            data: [0.03948211, 5.428585, 0.644729, 0.09955242, 0.0022077124000000003]
		        },
		        {
		            name: 'ios',
		            type: 'bar',
		            stack: 'ios',
                    itemStyle:{
                        normal:{
                            color:'#2F4554'
                        }
                    },
		            data: [0.10638093000000001, 3.9667457, 0.52612866, 0.036427254, 0.00030805287999999996]
		        },
		        {
		            name: 'ios',
		            type: 'bar',
		            stack: 'ios',
                    itemStyle:{
                        normal:{
                            color:'#61A0A8'
                        }
                    },
		            data: [0.32635636, 2.233486, 0.30682067999999996, 0.01840616, 0.00056476365]
		        },
		        {
		            name: 'ios',
		            type: 'bar',
		            stack: 'ios',
                    itemStyle:{
                        normal:{
                            color:'#D48265'
                        }
                    },
		            data: [0.9329125, 1.0155991, 0.24323342, 0.007316256, ]
		        },
		        {
		            name: 'ios',
		            type: 'bar',
		            stack: 'ios',
                    itemStyle:{
                        normal:{
                            color:'#91C7AE'
                        }
                    },
		            data: [3.3844742999999995, , , , ]
		        },
		        {
		            name: 'android',
		            type: 'bar',
		            stack: 'android',
                    itemStyle:{
                        normal:{
                            color:'#5793F3'
                        }
                    },
		            data: [0.029393380000000004, 8.364124, 2.236618, 0.53277747, 0.009575311]
		        },
                {
                    name: 'android',
                    type: 'bar',
                    stack: 'android',
                    itemStyle:{
                        normal:{
                            color:'#2F4554'
                        }
                    },
                    data: [0.14388637, 6.817544000000001, 2.0634409, 0.22598247, 0.001771304]
                },
                {
                    name: 'android',
                    type: 'bar',
                    stack: 'android',
                    itemStyle:{
                        normal:{
                            color:'#313796'
                        }
                    },
                    data: [0.87330425, 4.572455000000001, 1.3295819, 0.10997488000000001, 0.002413081]
                },
                {
                    name: 'android',
                    type: 'bar',
                    stack: 'android',
                    itemStyle:{
                        normal:{
                            color:'#CA8622'
                        }
                    },
                    data: [3.6951456, 2.8104948000000003, 1.1684446, 0.044359616, ]
                },
                {
                    name: 'android',
                    type: 'bar',
                    stack: 'android',
                    itemStyle:{
                        normal:{
                            color:'#BDA29A'
                        }
                    },
                    data: [6.938275000000001, , , , ]
                }
		    ]
		};
		bar.setOption(option);
	}
	
	/*$.get("json/IosAndroid.json").done(function(data){
		var man=[];
		var woman=[];
		for(var i=0;i<data.length;i++){
			if(data[i]["gender"]==0){
				woman.push(data[i])
			}else if(data[i]["gender"]==1){
				man.push(data[i])
			}
		}
		var manIos=[];
		var manAndroid=[];
		
		for(var i=0;i<woman.length;i++){
			if(woman[i]["phone"]=="ios"){
				manIos.push(woman[i])
			}else if(woman[i]["phone"]=="android"){
				manAndroid.push(woman[i])
			}
		}
		var man1=[];
		for(var i=0;i<manAndroid.length;i++){
			if(manAndroid[i]["agegroup"]<=20&&manAndroid[i]["agegroup"]>20){
				man1.push(manAndroid[i]["proportion"]*100);
			}
			
		}
		console.log(man1)
		
	})*/
	
	
	womanBar()
	function womanBar(){
		var bar=echarts.init($(".womanBar")[0]);
		var option = {
			backgroundColor: '../images/S8-bg.png',
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    yAxis:  {
		        type: 'value',
		        axisLabel:{
		        	formatter:'{value}%',
		        	textStyle:{
		        		color:"#fff"
		        	}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        axisLabel:{
		        	textStyle:{
		        		color:"#fff" 
		        	}
		        },
		        data: ['0-20','20-40','40-60','60-80','80-100']
		    },
		    series: [
		        {
		            name: 'ios',
		            type: 'bar',
		            stack: 'ios',
                    itemStyle:{
                        normal:{
                            color:'#C23531'
                        }
                    },
		            data: [0.030548577, 4.8795063, 0.8326155999999999, 0.08938668000000001, 0.0014375802]
		        },
		        {
		            name: 'ios',
		            type: 'bar',
		            stack: 'ios',
                    itemStyle:{
                        normal:{
                            color:'#2F4554'
                        }
                    },
		            data: [0.07431776, 3.5412475, 0.7453083, 0.033038670000000006, 0.00025671075]
		        },
		        {
		            name: 'ios',
		            type: 'bar',
		            stack: 'ios',
                    itemStyle:{
                        normal:{
                            color:'#61A0A8'
                        }
                    },
		            data: [0.22184942000000002, 1.9629644000000002, 0.41350963999999996, 0.015094591000000001, 0.0007701322]
		        },
		        {
		            name: 'ios',
		            type: 'bar',
		            stack: 'ios',
                    itemStyle:{
                        normal:{
                            color:'#D48265'
                        }
                    },
		            data: [0.51994193, 0.9990924999999999, 0.27206205, 0.0054422675, ]
		        },
		        {
		            name: 'ios',
		            type: 'bar',
		            stack: 'ios',
                    itemStyle:{
                        normal:{
                            color:'#91C7AE'
                        }
                    },
		            data: [2.8450739, , , , ]
		        },
		        {
		            name: 'android',
		            type: 'bar',
		            stack: 'android',
                    itemStyle:{
                        normal:{
                            color:'#5793F3'
                        }
                    },
		            data: [0.020639543, 3.5546992, 1.6527292999999998, 0.38203693, 0.0046464644000000005]
		        },
                {
                    name: 'android',
                    type: 'bar',
                    stack: 'android',
                    itemStyle:{
                        normal:{
                            color:'#2F4554'
                        }
                    },
                    data: [0.09488028999999999, 2.7416194000000003, 1.7517941, 0.15559238, 0.0013092248]
                },
                {
                    name: 'android',
                    type: 'bar',
                    stack: 'android',
                    itemStyle:{
                        normal:{
                            color:'#313796'
                        }
                    },
                    data: [0.5105463299999999, 1.951746, 1.2033829, 0.06623137, 0.0018996594]
                },
                {
                    name: 'android',
                    type: 'bar',
                    stack: 'android',
                    itemStyle:{
                        normal:{
                            color:'#CA8622'
                        }
                    },
                    data: [1.3458573999999999, 1.4974451, 0.9470573, 0.020613872, ]
                },
                {
                    name: 'android',
                    type: 'bar',
                    stack: 'android',
                    itemStyle:{
                        normal:{
                            color:'#BDA29A'
                        }
                    },
                    data: [3.32253, , , , ]
                }
		    ]
		};
		bar.setOption(option);
	}
	
	
	
	
	
	
	
	
	//图表1
	$.get("json/lineBar.json").done(function(data){
		var avgsleep=[];
		var avgdeepsleep=[];
		var avgcalories=[];
		for(var i=0;i<data.length;i++){
			avgsleep.push(data[i]['avgsleep']);
			avgdeepsleep.push(data[i]['avgdeepsleep']);
			avgcalories.push(data[i]['avgcalories']);
		}
		lineBar(avgsleep,avgdeepsleep,avgcalories)
	})
	function lineBar(avgsleep,avgdeepsleep,avgcalories){
		var lineBar=echarts.init($("#bar2_main")[0]);
		var option = {
				backgroundColor: '../images/S8-bg.png',
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['睡眠时间','深度睡眠时间','消耗大卡等指标'],
			        textStyle:{
		        		color:'#fff'
		        	}
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: ['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日'],
			            axisLine: {
			                lineStyle: {
			                    color: '#fff'
			                }
			            },
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            name: '时间',
			            axisLine: {
			                lineStyle: {
			                    color: '#fff'
			                }
			            },
			            axisLabel: {
			                formatter: '{value} 分'
			            }
			        },
			        {
			            type: 'value',
			            name: '大卡',
			            axisLine: {
			                lineStyle: {
			                    color: '#fff'
			                }
			            },
			            axisLabel: {
			                formatter: '{value} 大卡'
			            }
			        }
			    ],
			    series: [
			        {
			            name:'睡眠时间',
			            type:'bar',
			            data:avgsleep
			        },
			        {
			            name:'深度睡眠时间',
			            type:'bar',
			            data:avgdeepsleep
			        },
			        {
			            name:'消耗大卡等指标',
			            type:'line',
			            yAxisIndex: 1,
			            data:avgcalories
			        }
			    ]
			};
		lineBar.setOption(option)
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	//图表2
	weekData(day)
	function weekData(W){
	$.get("json/provday7.json").done(function(msg){
		var week={};
		var prov=[];
		for(var i in msg){
			var arr=msg[i];
			week[i]={};
			week[i]["avgsleep"]=[];
			week[i]["avgdeepsleep"]=[];
			for(var k=0;k<arr.length;k++){
				if(prov.indexOf(arr[k]["prov"])==-1){
					prov.push(arr[k]["prov"])
				}
				week[i]["avgsleep"].push(arr[k]["avgsleep"]);
				week[i]["avgdeepsleep"].push(arr[k]["avgdeepsleep"]);
			}
		}
		line(prov,week[W]["avgsleep"],week[W]["avgdeepsleep"])
	})
	}
	
	
	function line(prov,avgsleep,avgdeepsleep){
		var line=echarts.init($('#bar1_main')[0]);
		var option={
				backgroundColor: '../images/S8-bg.png',
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['睡眠时间','深度睡眠时间'],
			        textStyle:{
		        		color:'#fff'
		        	}
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data:prov,
			            axisLabel:{
			             	interval:0,
			             	rotate:60
			             },
			            axisLine: {
			                lineStyle: {
			                    color: '#fff'
			                }
			            },
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            name: '时间',
			            axisLine: {
			                lineStyle: {
			                    color: '#fff'
			                }
			            },
			            axisLabel: {
			                formatter: '{value} 分'
			            }
			        }
			    ],
			    series: [
			        {
			            name:'睡眠时间',
			            type:'line',
			             itemStyle:{
	                        normal:{
	                            color:'#C23531'
	                        }
	                    },
			            data:avgsleep
			        },
			        {
			            name:'深度睡眠时间',
			            type:'line',
			             itemStyle:{
	                        normal:{
	                            color:'#709EE0'
	                        }
	                    },
			            data:avgdeepsleep
			        }
			    ]
			}
		line.setOption(option)
	}
	
	
	
	
	
	
	
	
	
	
	startData(day)
	function startData(day){

	$.getJSON('http://192.168.100.52:8020/jsonParse/2/100/全选').done(function(msg){
		//七天的开始睡眠数据和起床数据
		var week={};
		for(var i in msg){
			week[i]={};
			week[i]["11:00"]=[];
			week[i]["11:30"]=[];
			week[i]["00:00"]=[];
			week[i]["00:30"]=[];
			week[i]["01:00"]=[];
			week[i]["01:30"]=[];
			
			week[i]["06:00"]=[];
			week[i]["06:30"]=[];
			week[i]["07:00"]=[];
			week[i]["07:30"]=[];
			week[i]["08:00"]=[];
			week[i]["08:30"]=[];
			var obj=msg[i];
			for(var k=0;k<obj.length;k++){
				
				if(Math.round(obj[k]["avgsleepstart"])<=1380){
					week[i]["11:00"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				if(Math.round(obj[k]["avgsleepstart"])<=1410&&obj[k]["avgsleepstart"]){
					week[i]["11:30"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				if(Math.round(obj[k]["avgsleepstart"])<=1440&&obj[k]["avgsleepstart"]){
					week[i]["00:00"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				if(Math.round(obj[k]["avgsleepstart"])<=1470&&obj[k]["avgsleepstart"]){
					week[i]["00:30"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				if(Math.round(obj[k]["avgsleepstart"])<=1500&&obj[k]["avgsleepstart"]){
					week[i]["01:00"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				if(Math.round(obj[k]["avgsleepstart"])<1600&&obj[k]["avgsleepstart"]){
					week[i]["01:30"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				
				
				
				if(Math.round(obj[k]["avgsleepend"])>=360&&obj[k]["avgsleepend"]){
					week[i]["06:00"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				if(Math.round(obj[k]["avgsleepend"])>=390&&obj[k]["avgsleepend"]){
					week[i]["06:30"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				if(Math.round(obj[k]["avgsleepend"])>=420&&obj[k]["avgsleepend"]){
					week[i]["07:00"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				if(Math.round(obj[k]["avgsleepend"])>=450&&obj[k]["avgsleepend"]){
					week[i]["07:30"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				if(Math.round(obj[k]["avgsleepend"])>=480&&obj[k]["avgsleepend"]){
					week[i]["08:00"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				if(Math.round(obj[k]["avgsleepend"])>510&&obj[k]["avgsleepend"]){
					week[i]["08:30"].push({"name":obj[k]["city"],"value":[obj[k]["lon"],obj[k]["lat"]]});
				}
				
				
				
			
				
				
			}
			
			
			
		}
		
		
		
		var options=[];
		var data=week[day]
		for(var i in data){
			options.push({series:[{data:data[i]}]})
		}
			
		
		
		var time=['11:00之前', '11:30之前', '00:00之前', '00:30之前', '01:00之前','01:00之后','06:00之前', '06:30之前', '07:00之前', '07:30之前', '08:00之前','08:00之后']
		
		chinaMap(options,time)
		
	})
	
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	 function chinaMap(options,time){
	 	
	   var myChart = echarts.init(document.getElementById("main")); 
	       myChart.showLoading();
	
	    myChart.hideLoading();

    option = {
    	baseOption:{
    		timeline:{
                axisType:'category',
                autoPlay:true,
                loop:true,
                playInterval:5000,
                data:time,
                bottom:50,
                label:{
                	normal:{
                		interval:0,
                		rotate:30,
                		textStyle:{
                			color:"#fff"
                		},
                		formatter:function(s){
                        return s
                    	}
                	}
                    
                }
    		},
	    	title : {
	            text: '',
	            left: 'center',
	            top: 'top',
	            textStyle: {
	                color: '#fff'
	            }
	        },
	        tooltip: {
	        	/*formatter:function(a){
	        		return a.seriesName+"</br>"+a.data.prov+"</br>"+a.data.value[2]
	        	}*/
	        },
	        geo: {
	            name: '',
	            type: 'scatter',
	            map: 'china',
	            label: {
	                emphasis: {
	                    show: false
	                }
	            },
	            itemStyle: {
	                normal: {
	                	borderColor: '1b2e75',
	                	borderWidth: 0.5, //国界线
	                    areaColor: '#1b2e75'
	                },
	                emphasis: {
	                    areaColor: '#1b2e75'
	                }
	            }
	        },
	        series: [{
            name: '睡眠时间',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 10,
            large: true,
           /* symbolSize: function(val) {
                return val[2] / 50;
            },*/
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(14, 241, 242, 0.8)',
                    color: 'rgba(14, 241, 242, 0.8)'
                }
            }
        }]
    	},
        options:options
        
    }

	myChart.setOption(option)

   

    }
	
	
	
	
	
	
	
	
	
	
})()
